<template>
  <div id="container" class="rainy">
    <img id="img" crossOrigin="anonymous" src="/static/images/bg.jpg" @load="setRainEffect()"/>
  </div>
</template>

<script>
import RainyDay from '@/lib/rainy'
export default {
  data () {
    return {
      rainEngine: null
    }
  },
  methods: {
    setRainEffect () {
      this.rainEngine = new RainyDay({
        image: document.getElementById('img'),
        parentElement: document.getElementById('container'),
        blur: 10,
        opacity: 1
      })
      this.rainEngine.rain(
        [
          [1, 0, 20],
          [3, 3, 1]
        ],
      100)
    }
  }
}
</script>

<style lang="scss" scoped>
.rainy {
  position: fixed;
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
